<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统设置 - 管理员面板</title>
    
    <!-- Font Awesome -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap" rel="stylesheet">
    <link href="css/admin-style.css" rel="stylesheet">
    
    <style>
        .settings-content {
            max-width: 1000px;
            margin: 0 auto;
        }
        
        .settings-nav {
            display: flex;
            background: rgba(255, 255, 255, 0.03);
            border-radius: 16px;
            padding: 8px;
            margin-bottom: 30px;
            border: 1px solid rgba(255, 255, 255, 0.08);
        }
        
        .settings-nav-item {
            flex: 1;
            padding: 12px 20px;
            text-align: center;
            color: rgba(255, 255, 255, 0.7);
            cursor: pointer;
            border-radius: 12px;
            transition: all 0.3s ease;
            font-weight: 600;
        }
        
        .settings-nav-item.active {
            background: linear-gradient(135deg, #4ade80, #06b6d4);
            color: white;
            box-shadow: 0 4px 15px rgba(74, 222, 128, 0.3);
        }
        
        .settings-nav-item:hover:not(.active) {
            background: rgba(255, 255, 255, 0.05);
            color: #4ade80;
        }
        
        .settings-section {
            display: none;
            animation: fadeIn 0.3s ease;
        }
        
        .settings-section.active {
            display: block;
        }
        
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(10px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .setting-group {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 20px;
            padding: 30px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            backdrop-filter: blur(20px);
            margin-bottom: 25px;
        }
        
        .setting-group h3 {
            color: #fff;
            font-size: 1.3rem;
            font-weight: 700;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .setting-group h3 i {
            color: #4ade80;
        }
        
        .setting-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 0;
            border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        }
        
        .setting-item:last-child {
            border-bottom: none;
        }
        
        .setting-info {
            flex: 1;
            margin-right: 20px;
        }
        
        .setting-title {
            color: #fff;
            font-weight: 600;
            margin-bottom: 5px;
        }
        
        .setting-description {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
            line-height: 1.5;
        }
        
        .setting-control {
            display: flex;
            align-items: center;
            gap: 15px;
        }
        
        /* 开关样式 */
        .toggle-switch {
            position: relative;
            width: 50px;
            height: 26px;
            background: rgba(255, 255, 255, 0.2);
            border-radius: 13px;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .toggle-switch.active {
            background: linear-gradient(135deg, #4ade80, #06b6d4);
        }
        
        .toggle-switch::before {
            content: '';
            position: absolute;
            top: 3px;
            left: 3px;
            width: 20px;
            height: 20px;
            background: white;
            border-radius: 50%;
            transition: all 0.3s ease;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
        }
        
        .toggle-switch.active::before {
            transform: translateX(24px);
        }
        
        /* 输入框样式 */
        .setting-input {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 10px 15px;
            color: #fff;
            font-size: 0.9rem;
            min-width: 200px;
            transition: all 0.3s ease;
        }
        
        .setting-input:focus {
            outline: none;
            border-color: #4ade80;
            box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.1);
        }
        
        .setting-select {
            background: rgba(255, 255, 255, 0.05);
            border: 1px solid rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            padding: 10px 15px;
            color: #fff;
            font-size: 0.9rem;
            min-width: 150px;
            cursor: pointer;
        }
        
        .setting-select option {
            background: #1a1a2e;
            color: #fff;
        }
        
        /* 范围滑块 */
        .range-slider {
            width: 200px;
            margin: 0 15px;
        }
        
        .range-input {
            width: 100%;
            height: 6px;
            border-radius: 3px;
            background: rgba(255, 255, 255, 0.2);
            outline: none;
            -webkit-appearance: none;
        }
        
        .range-input::-webkit-slider-thumb {
            -webkit-appearance: none;
            width: 18px;
            height: 18px;
            border-radius: 50%;
            background: linear-gradient(135deg, #4ade80, #06b6d4);
            cursor: pointer;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3);
        }
        
        .range-value {
            color: #4ade80;
            font-weight: 600;
            min-width: 40px;
            text-align: center;
        }
        
        /* 按钮样式 */
        .setting-btn {
            padding: 10px 20px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #4ade80, #06b6d4);
            color: white;
        }
        
        .btn-secondary {
            background: rgba(255, 255, 255, 0.1);
            color: #fff;
            border: 1px solid rgba(255, 255, 255, 0.2);
        }
        
        .btn-danger {
            background: linear-gradient(135deg, #ef4444, #dc2626);
            color: white;
        }
        
        .setting-btn:hover {
            transform: translateY(-1px);
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
        }
        
        /* 颜色选择器 */
        .color-picker {
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .color-input {
            width: 40px;
            height: 40px;
            border: none;
            border-radius: 10px;
            cursor: pointer;
            background: none;
        }
        
        .color-preview {
            width: 20px;
            height: 20px;
            border-radius: 50%;
            border: 2px solid rgba(255, 255, 255, 0.3);
        }
        
        /* 文件上传 */
        .file-upload {
            position: relative;
            display: inline-block;
        }
        
        .file-input {
            position: absolute;
            opacity: 0;
            width: 100%;
            height: 100%;
            cursor: pointer;
        }
        
        .file-label {
            display: flex;
            align-items: center;
            gap: 8px;
            padding: 10px 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 1px solid rgba(255, 255, 255, 0.2);
            border-radius: 10px;
            color: #fff;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .file-label:hover {
            background: rgba(74, 222, 128, 0.1);
            border-color: #4ade80;
        }
        
        /* 保存指示器 */
        .save-indicator {
            position: fixed;
            top: 20px;
            right: 20px;
            background: #22c55e;
            color: white;
            padding: 10px 20px;
            border-radius: 10px;
            display: none;
            align-items: center;
            gap: 8px;
            z-index: 10000;
            animation: slideIn 0.3s ease;
        }
        
        @keyframes slideIn {
            from { transform: translateX(100%); }
            to { transform: translateX(0); }
        }
        
        /* 统计卡片 */
        .stats-cards {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .stats-card {
            background: rgba(255, 255, 255, 0.03);
            border-radius: 16px;
            padding: 25px;
            border: 1px solid rgba(255, 255, 255, 0.08);
            text-align: center;
        }
        
        .stats-card .icon {
            font-size: 2rem;
            margin-bottom: 10px;
            background: linear-gradient(135deg, #4ade80, #06b6d4);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
        }
        
        .stats-card .value {
            font-size: 1.8rem;
            font-weight: 700;
            color: #fff;
            margin-bottom: 5px;
        }
        
        .stats-card .label {
            color: rgba(255, 255, 255, 0.6);
            font-size: 0.9rem;
        }
    </style>
</head>
<body>
    <div class="admin-layout">
        <!-- 侧边栏 -->
        <nav class="admin-sidebar">
            <div class="sidebar-header">
                <img src="images/logo-small.svg" alt="管理员面板" class="sidebar-logo">
                <h3>管理面板</h3>
            </div>
            
            <ul class="sidebar-menu">
                <li class="menu-item">
                    <a href="admin-dashboard.html">
                        <i class="fas fa-chart-pie"></i>
                        <span>仪表板</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="admin-feedback.html">
                        <i class="fas fa-comments"></i>
                        <span>反馈管理</span>
                        <span class="badge" id="feedbackCount">0</span>
                    </a>
                </li>
                <li class="menu-item active">
                    <a href="admin-settings.html">
                        <i class="fas fa-cog"></i>
                        <span>系统设置</span>
                    </a>
                </li>
                <li class="menu-divider"></li>
                <li class="menu-item">
                    <a href="index.html">
                        <i class="fas fa-external-link-alt"></i>
                        <span>返回网站</span>
                    </a>
                </li>
                <li class="menu-item">
                    <a href="#" onclick="logout()">
                        <i class="fas fa-sign-out-alt"></i>
                        <span>退出登录</span>
                    </a>
                </li>
            </ul>
        </nav>

        <!-- 主内容区域 -->
        <main class="admin-main">
            <!-- 顶部导航 -->
            <header class="admin-header">
                <div class="header-left">
                    <button class="sidebar-toggle" onclick="toggleSidebar()">
                        <i class="fas fa-bars"></i>
                    </button>
                    <h1>系统设置</h1>
                </div>
                <div class="header-right">
                    <div class="header-notification">
                        <i class="fas fa-bell"></i>
                        <span class="notification-badge">3</span>
                    </div>
                    <div class="header-user">
                        <img src="images/admin-avatar.svg" alt="管理员" class="user-avatar">
                        <span>管理员</span>
                    </div>
                </div>
            </header>

            <!-- 设置内容 -->
            <div class="dashboard-content">
                <div class="settings-content">
                    <!-- 设置导航 -->
                    <div class="settings-nav">
                        <div class="settings-nav-item active" onclick="switchSettingsTab('general')">
                            <i class="fas fa-cog"></i> 基础设置
                        </div>
                        <div class="settings-nav-item" onclick="switchSettingsTab('appearance')">
                            <i class="fas fa-palette"></i> 外观设置
                        </div>
                        <div class="settings-nav-item" onclick="switchSettingsTab('notification')">
                            <i class="fas fa-bell"></i> 通知设置
                        </div>
                        <div class="settings-nav-item" onclick="switchSettingsTab('security')">
                            <i class="fas fa-shield-alt"></i> 安全设置
                        </div>
                        <div class="settings-nav-item" onclick="switchSettingsTab('backup')">
                            <i class="fas fa-database"></i> 备份管理
                        </div>
                    </div>

                    <!-- 基础设置 -->
                    <div id="general" class="settings-section active">
                        <div class="setting-group">
                            <h3><i class="fas fa-globe"></i> 站点配置</h3>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">网站标题</div>
                                    <div class="setting-description">设置网站的主标题，将显示在浏览器标签页和搜索结果中</div>
                                </div>
                                <div class="setting-control">
                                    <input type="text" class="setting-input" id="siteTitle" value="加强附魔金苹果模组" placeholder="输入网站标题">
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">网站描述</div>
                                    <div class="setting-description">简短描述您的网站内容，有助于SEO优化</div>
                                </div>
                                <div class="setting-control">
                                    <input type="text" class="setting-input" id="siteDescription" value="Minecraft 1.21.8 增强模组" placeholder="输入网站描述">
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">默认语言</div>
                                    <div class="setting-description">设置网站的默认显示语言</div>
                                </div>
                                <div class="setting-control">
                                    <select class="setting-select" id="defaultLanguage">
                                        <option value="zh">中文</option>
                                        <option value="en">English</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">启用多语言支持</div>
                                    <div class="setting-description">允许用户切换网站语言</div>
                                </div>
                                <div class="setting-control">
                                    <div class="toggle-switch active" onclick="toggleSwitch(this)" data-setting="multiLanguage"></div>
                                </div>
                            </div>
                        </div>

                        <div class="setting-group">
                            <h3><i class="fas fa-download"></i> 下载设置</h3>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">当前模组版本</div>
                                    <div class="setting-description">设置当前可下载的模组版本号</div>
                                </div>
                                <div class="setting-control">
                                    <input type="text" class="setting-input" id="currentVersion" value="v1.1.0" placeholder="例: v1.1.0">
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">下载计数</div>
                                    <div class="setting-description">显示模组的总下载次数</div>
                                </div>
                                <div class="setting-control">
                                    <input type="number" class="setting-input" id="downloadCount" value="1234" placeholder="下载次数">
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">自动统计下载</div>
                                    <div class="setting-description">自动记录和统计文件下载次数</div>
                                </div>
                                <div class="setting-control">
                                    <div class="toggle-switch active" onclick="toggleSwitch(this)" data-setting="autoDownloadCount"></div>
                                </div>
                            </div>
                        </div>

                        <div class="setting-group">
                            <h3><i class="fas fa-comments"></i> 反馈设置</h3>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">启用在线反馈</div>
                                    <div class="setting-description">允许用户通过网站表单提交反馈</div>
                                </div>
                                <div class="setting-control">
                                    <div class="toggle-switch active" onclick="toggleSwitch(this)" data-setting="enableFeedback"></div>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">反馈邮箱</div>
                                    <div class="setting-description">接收反馈邮件的邮箱地址</div>
                                </div>
                                <div class="setting-control">
                                    <input type="email" class="setting-input" id="feedbackEmail" value="feedback@example.com" placeholder="反馈邮箱">
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">自动回复</div>
                                    <div class="setting-description">向提交反馈的用户发送自动回复邮件</div>
                                </div>
                                <div class="setting-control">
                                    <div class="toggle-switch" onclick="toggleSwitch(this)" data-setting="autoReply"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 外观设置 -->
                    <div id="appearance" class="settings-section">
                        <div class="setting-group">
                            <h3><i class="fas fa-paint-brush"></i> 主题配置</h3>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">主题颜色</div>
                                    <div class="setting-description">设置网站的主要品牌颜色</div>
                                </div>
                                <div class="setting-control">
                                    <div class="color-picker">
                                        <input type="color" class="color-input" id="primaryColor" value="#4ade80">
                                        <div class="color-preview" style="background: #4ade80;"></div>
                                        <span style="color: #4ade80; font-weight: 600;">#4ade80</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">辅助颜色</div>
                                    <div class="setting-description">设置网站的辅助装饰颜色</div>
                                </div>
                                <div class="setting-control">
                                    <div class="color-picker">
                                        <input type="color" class="color-input" id="secondaryColor" value="#06b6d4">
                                        <div class="color-preview" style="background: #06b6d4;"></div>
                                        <span style="color: #06b6d4; font-weight: 600;">#06b6d4</span>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">动画效果强度</div>
                                    <div class="setting-description">调整网站动画和过渡效果的强度</div>
                                </div>
                                <div class="setting-control">
                                    <div class="range-slider">
                                        <input type="range" class="range-input" id="animationIntensity" min="0" max="100" value="80">
                                    </div>
                                    <span class="range-value">80%</span>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">启用视差效果</div>
                                    <div class="setting-description">在支持的设备上启用背景视差滚动效果</div>
                                </div>
                                <div class="setting-control">
                                    <div class="toggle-switch active" onclick="toggleSwitch(this)" data-setting="parallaxEffect"></div>
                                </div>
                            </div>
                        </div>

                        <div class="setting-group">
                            <h3><i class="fas fa-image"></i> 图片和媒体</h3>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">网站Logo</div>
                                    <div class="setting-description">上传自定义的网站Logo图片</div>
                                </div>
                                <div class="setting-control">
                                    <div class="file-upload">
                                        <input type="file" class="file-input" id="logoUpload" accept="image/*">
                                        <label for="logoUpload" class="file-label">
                                            <i class="fas fa-upload"></i>
                                            选择文件
                                        </label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">背景图片</div>
                                    <div class="setting-description">设置首页Hero区域的背景图片</div>
                                </div>
                                <div class="setting-control">
                                    <div class="file-upload">
                                        <input type="file" class="file-input" id="backgroundUpload" accept="image/*">
                                        <label for="backgroundUpload" class="file-label">
                                            <i class="fas fa-upload"></i>
                                            选择文件
                                        </label>
                                    </div>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">图片压缩质量</div>
                                    <div class="setting-description">自动压缩上传图片的质量等级</div>
                                </div>
                                <div class="setting-control">
                                    <div class="range-slider">
                                        <input type="range" class="range-input" id="imageQuality" min="10" max="100" value="85">
                                    </div>
                                    <span class="range-value">85%</span>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 通知设置 -->
                    <div id="notification" class="settings-section">
                        <div class="setting-group">
                            <h3><i class="fas fa-envelope"></i> 邮件通知</h3>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">新反馈通知</div>
                                    <div class="setting-description">有新反馈提交时发送邮件通知</div>
                                </div>
                                <div class="setting-control">
                                    <div class="toggle-switch active" onclick="toggleSwitch(this)" data-setting="newFeedbackNotify"></div>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">每日统计报告</div>
                                    <div class="setting-description">每天发送网站访问和下载统计报告</div>
                                </div>
                                <div class="setting-control">
                                    <div class="toggle-switch" onclick="toggleSwitch(this)" data-setting="dailyReport"></div>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">系统维护提醒</div>
                                    <div class="setting-description">系统需要维护时发送提醒通知</div>
                                </div>
                                <div class="setting-control">
                                    <div class="toggle-switch active" onclick="toggleSwitch(this)" data-setting="maintenanceAlert"></div>
                                </div>
                            </div>
                        </div>

                        <div class="setting-group">
                            <h3><i class="fas fa-desktop"></i> 浏览器通知</h3>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">桌面通知</div>
                                    <div class="setting-description">在浏览器中显示桌面推送通知</div>
                                </div>
                                <div class="setting-control">
                                    <div class="toggle-switch" onclick="toggleSwitch(this)" data-setting="desktopNotify"></div>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">声音提示</div>
                                    <div class="setting-description">新通知时播放提示音</div>
                                </div>
                                <div class="setting-control">
                                    <div class="toggle-switch active" onclick="toggleSwitch(this)" data-setting="soundAlert"></div>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">通知频率限制</div>
                                    <div class="setting-description">限制通知频率，避免过度打扰</div>
                                </div>
                                <div class="setting-control">
                                    <select class="setting-select" id="notifyFrequency">
                                        <option value="instant">立即通知</option>
                                        <option value="5min">5分钟合并</option>
                                        <option value="15min">15分钟合并</option>
                                        <option value="1hour">1小时合并</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 安全设置 -->
                    <div id="security" class="settings-section">
                        <div class="setting-group">
                            <h3><i class="fas fa-lock"></i> 访问控制</h3>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">管理员密码</div>
                                    <div class="setting-description">更改管理员登录密码</div>
                                </div>
                                <div class="setting-control">
                                    <button class="setting-btn btn-secondary" onclick="changePassword()">
                                        <i class="fas fa-key"></i>
                                        更改密码
                                    </button>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">登录失败锁定</div>
                                    <div class="setting-description">多次登录失败后临时锁定账户</div>
                                </div>
                                <div class="setting-control">
                                    <div class="toggle-switch active" onclick="toggleSwitch(this)" data-setting="loginLockout"></div>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">会话超时时间</div>
                                    <div class="setting-description">管理员会话的自动超时时间（分钟）</div>
                                </div>
                                <div class="setting-control">
                                    <select class="setting-select" id="sessionTimeout">
                                        <option value="30">30分钟</option>
                                        <option value="60">1小时</option>
                                        <option value="240">4小时</option>
                                        <option value="480">8小时</option>
                                    </select>
                                </div>
                            </div>
                        </div>

                        <div class="setting-group">
                            <h3><i class="fas fa-shield-virus"></i> 安全防护</h3>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">XSS防护</div>
                                    <div class="setting-description">启用跨站脚本攻击防护</div>
                                </div>
                                <div class="setting-control">
                                    <div class="toggle-switch active" onclick="toggleSwitch(this)" data-setting="xssProtection"></div>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">CSRF防护</div>
                                    <div class="setting-description">启用跨站请求伪造防护</div>
                                </div>
                                <div class="setting-control">
                                    <div class="toggle-switch active" onclick="toggleSwitch(this)" data-setting="csrfProtection"></div>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">IP访问限制</div>
                                    <div class="setting-description">限制特定IP地址的访问频率</div>
                                </div>
                                <div class="setting-control">
                                    <div class="toggle-switch" onclick="toggleSwitch(this)" data-setting="ipRateLimit"></div>
                                </div>
                            </div>
                        </div>
                    </div>

                    <!-- 备份管理 -->
                    <div id="backup" class="settings-section">
                        <div class="stats-cards">
                            <div class="stats-card">
                                <div class="icon"><i class="fas fa-database"></i></div>
                                <div class="value" id="backupSize">2.3 GB</div>
                                <div class="label">备份大小</div>
                            </div>
                            <div class="stats-card">
                                <div class="icon"><i class="fas fa-clock"></i></div>
                                <div class="value" id="lastBackup">2小时前</div>
                                <div class="label">最后备份</div>
                            </div>
                            <div class="stats-card">
                                <div class="icon"><i class="fas fa-history"></i></div>
                                <div class="value" id="backupCount">15</div>
                                <div class="label">备份数量</div>
                            </div>
                        </div>

                        <div class="setting-group">
                            <h3><i class="fas fa-cloud-upload-alt"></i> 自动备份</h3>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">启用自动备份</div>
                                    <div class="setting-description">定期自动备份网站数据和配置</div>
                                </div>
                                <div class="setting-control">
                                    <div class="toggle-switch active" onclick="toggleSwitch(this)" data-setting="autoBackup"></div>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">备份频率</div>
                                    <div class="setting-description">设置自动备份的时间间隔</div>
                                </div>
                                <div class="setting-control">
                                    <select class="setting-select" id="backupFrequency">
                                        <option value="daily">每天</option>
                                        <option value="weekly">每周</option>
                                        <option value="monthly">每月</option>
                                    </select>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">保留备份数量</div>
                                    <div class="setting-description">最多保留的历史备份文件数量</div>
                                </div>
                                <div class="setting-control">
                                    <div class="range-slider">
                                        <input type="range" class="range-input" id="backupRetention" min="5" max="50" value="15">
                                    </div>
                                    <span class="range-value">15</span>
                                </div>
                            </div>
                        </div>

                        <div class="setting-group">
                            <h3><i class="fas fa-tools"></i> 备份操作</h3>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">立即备份</div>
                                    <div class="setting-description">手动创建当前系统的完整备份</div>
                                </div>
                                <div class="setting-control">
                                    <button class="setting-btn btn-primary" onclick="createBackup()">
                                        <i class="fas fa-save"></i>
                                        创建备份
                                    </button>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">恢复备份</div>
                                    <div class="setting-description">从备份文件恢复系统数据</div>
                                </div>
                                <div class="setting-control">
                                    <button class="setting-btn btn-secondary" onclick="restoreBackup()">
                                        <i class="fas fa-undo"></i>
                                        恢复备份
                                    </button>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">下载备份</div>
                                    <div class="setting-description">下载备份文件到本地计算机</div>
                                </div>
                                <div class="setting-control">
                                    <button class="setting-btn btn-secondary" onclick="downloadBackup()">
                                        <i class="fas fa-download"></i>
                                        下载备份
                                    </button>
                                </div>
                            </div>
                            
                            <div class="setting-item">
                                <div class="setting-info">
                                    <div class="setting-title">清理旧备份</div>
                                    <div class="setting-description">删除过期的备份文件以释放空间</div>
                                </div>
                                <div class="setting-control">
                                    <button class="setting-btn btn-danger" onclick="cleanupBackups()">
                                        <i class="fas fa-trash"></i>
                                        清理备份
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </main>
    </div>

    <!-- 保存指示器 -->
    <div class="save-indicator" id="saveIndicator">
        <i class="fas fa-check"></i>
        <span>设置已保存</span>
    </div>

    <script src="js/admin-settings.js"></script>
</body>
</html>